@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info_edit.css')}}">

@section('content')
<div class="mainHrContent" id="hrInfodetails">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>

                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 基础信息

            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrInfodetailss">
            <div class="basicInfo_title">
                <span></span>
                基础信息
            </div>
            <div class="userDetails">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <p style="align-items: flex-start;">
                        <span class="details_title">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：</span>
                        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="form.avatar" :src="form.avatar" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </p>
                    <p>
                        <span class="details_title">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</span>
                        <el-input v-model="form.username"></el-input>
                    </p>
                    <p>
                        <span class="details_title">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                        @{{form.user_sn}}
                    </p>
                    <p>
                        <span class="details_title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                        <el-input v-model="form.nickname"></el-input>
                    </p>
                    <p>
                        <span class="details_title">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                        <el-radio-group size="mini" v-model="form.sex">
                            <el-radio :label="1" border>男</el-radio>
                            <el-radio :label="2" border>女</el-radio>
                        </el-radio-group>
                    </p>
                    <p>
                        <span class="details_title">手机号码：</span>
                        @{{form.mobile}}<a href="{{route('home.hrmy.hrSafePhone') }}">修改</a>
                    </p>
                    <el-form-item prop="email">
                        <p>
                            <span class="details_title">电子邮箱：</span>
                            <el-input v-model="form.email"></el-input>
                        </p>
                    </el-form-item>
                    <p>
                        <span class="details_title">公司名称：</span>
                        <el-input v-model="form.company_name"></el-input>
                    </p>
                    <p>
                        <span class="details_title">部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：</span>
                        <el-input v-model="form.hr_department"></el-input>
                    </p>
                    <p>
                        <span class="details_title">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
                        <el-input v-model="form.hr_position"></el-input>
                    </p>
                    <p>
                        <span class="details_title">公司类型：</span>
                        <el-select v-model="form.company_type_id" filterable clearable size="mini">
                            <el-option v-for="item in companyTypeData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <p>
                        <span class="details_title">公司行业：</span>
                        <el-select v-model="form.company_industry_id" filterable clearable size="mini">
                            <el-option v-for="item in companyIndustryData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <p>
                        <span class="details_title">员工人数：</span>
                        <el-select v-model="form.company_size_id" filterable clearable size="mini">
                            <el-option v-for="item in companyEmployeesData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                    <p>
                        <span class="details_title">HR部门人数：</span>
                        <el-select v-model="form.hr_size_id" filterable clearable size="mini">
                            <el-option v-for="item in HREmployeesData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </p>
                </el-form>
                <button @click="submitForm('ruleForm')">保存</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrInfodetails = new Vue({
            el: '#hrInfodetailss',
            data: () => {
                return {
                    imageUrl: '',
                    uploadUrl: UPLOAD_FILE,
                    form: {
                        avatar: '',
                        username: '',
                        user_sn: '',
                        nickname: '',
                        sex: '',
                        mobile: '',
                        email: '',
                        company_name: '',
                        hr_department: '',
                        hr_position: '',
                        company_type_id: '',
                        company_industry_id: '',
                        company_size_id: '',
                        hr_size_id: '',
                    },
                    avatar:'',
                    rules: {
                        email: [{
                            required: true,
                            validator: validateEmail,
                            trigger: 'blur'
                        }],
                    },
                    companyTypeData: [],
                    companyIndustryData: [],
                    companyEmployeesData: [],
                    HREmployeesData: [],
                }
            },
            created() {
                let data = {}
                apiAjax("{{ route('home.user.userBasicInfoApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.form = res.data;
                        this.avatar=this.form.avatar;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {
                });
                //公司类型
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 1
                }, (res) => {
                    this.companyTypeData = res.data;
                });
                //公司行业
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 2
                }, (res) => {
                    this.companyIndustryData = res.data;
                });
                //公司规模（员工人数）
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 3
                }, (res) => {
                    this.companyEmployeesData = res.data;
                });
                //HR部门人数
                apiAjax("{{ route('home.public.companys') }}", 'get', {
                    type: 4
                }, (res) => {
                    this.HREmployeesData = res.data;
                });
            },
            mounted() {

            },
            methods: {
                handleAvatarSuccess(res, file) {
                    this.form.avatar = URL.createObjectURL(file.raw);
                    this.avatar=file.response.data.path
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                avatar: this.avatar,
                                username: this.form.username,
                                user_sn: this.form.user_sn,
                                nickname: this.form.nickname,
                                sex: this.form.sex,
                                email: this.form.email,
                                company_name:this.form.company_name,
                                hr_department:this.form.hr_department,
                                hr_position: this.form.hr_position,
                                company_type: this.form.company_type_id,
                                company_industry: this.form.company_industry_id,
                                company_size: this.form.company_size_id,
                                hr_size: this.form.hr_size_id,

                            };
                            apiAjax("{{ route('home.user.userBasicInfoEditApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.hrmy.hrInfo') }}";

                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection